$namespace: custom-select;
$select-padding: (
  small: 2px,
  medium: 4px,
  large: 8px,
);
$select-font-size: (
  small: 12px,
  medium: 14px,
  large: 16px,
);
$select-border-radius: (
  small: 2px,
  medium: 4px,
  large: 8px,
);
$border-width: 2px;

.#{$namespace}-wrapper {
  width: 200px;
  &.#{$namespace}-disabled {
    pointer-events: none;
    box-shadow: none;
    color: var(--color-disabled-color);
    background-color: var(--color-disabled-bgc);
  }
  .#{$namespace} {
    width: 100%;
    height: 100%;
    border: $border-width solid var(--color-form-item);
    box-sizing: border-box;
    border-radius: inherit;
    &.highlight {
      border-color: var(--color-primary1);
    }
    input {
      outline: none;
      color: inherit;
    }
  }
  .icon-area {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    .up {
      &::before {
        display: inline-block;
        transform: rotate(180deg);
      }
    }
  }
}

.#{$namespace}-options {
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1001;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  .#{$namespace}-option {
    color: var(--color-no-active-color);
    &:hover, &.selected {
      color: var(--color-active-color);
      background-color: var(--color-main-bg-3);
    }
  }
}

@each $size in (small, medium, large) {
  $radius: map.get($select-border-radius, $size);
  $padding: map.get($select-padding, $size);
  $font-size: map.get($select-font-size, $size);
  .#{$namespace}-wrapper--#{$size} {
    border-radius: $radius;
    .#{$namespace}--#{$size} {
      padding: $padding;
      font-size: $font-size;
      input {
        font-size: $font-size;
      }
    }
  }
  .#{$namespace}-options--#{$size} {
    border-radius: $radius;
    padding: $padding 0;
    font-size: $font-size;
    .#{$namespace}-option {
      padding: calc($padding + $border-width);
    }
  }
}